<template>
    <el-dialog
        class="dialog"
        :destroy-on-close="true"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            label-width="auto"
            class="form"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="园区名称" prop="yard_name">
                <el-input
                    v-model="formData.yard_name"
                    placeholder="请输入园区名称"
                    maxlength="20"
                ></el-input>
            </el-form-item>
            <el-form-item label="联系人" prop="yard_lxr">
                <el-input
                    v-model="formData.yard_lxr"
                    placeholder="请输入联系人"
                    maxlength="20"
                ></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="yard_tel">
                <el-input
                    v-model="formData.yard_tel"
                    placeholder="请输入联系电话"
                    maxlength="11"
                ></el-input>
            </el-form-item>
            <el-form-item label="园区地址" prop="yard_addr">
                <el-input
                    v-model="formData.yard_addr"
                    placeholder="请输入园区地址"
                    maxlength="25"
                ></el-input>
            </el-form-item>
           
            <el-form-item label="是否测试" prop="is_test">
                <el-select
                    v-model="formData.is_test"
                    placeholder="请选择是否测试"
                >
                    <el-option
                        v-for="item in isTestData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
@Component({
    mixins: [mixinDialogForm]
})
export default class parkEdit extends Vue {
    // 新增
    @Action("park/add") itemAdd: any;
    // 编辑
    @Action("park/edit") itemEdit: any;
    editInit(data: any) {
        const me = this as any;
        me.formData = Object.assign({}, me.formData, data);
    }

    // 表单数据
    formData: any = {
        yard_sn: "",
        yard_name: "",
        yard_lxr: "",
        yard_addr: "",
        yard_tel: "",
        factory_sn: "",
        is_test: 1,
        auto_reg: 1
    };
    isTestData: any = [
        { label: '测试园区', value: 1 },
        { label: '正式交付', value: 2 }
    ];

    autoRegData: any = [
        { label: '通用注册码', value: 1 },
        { label: '专属注册码', value: 2 }
    ];

    /**
     * 校验配置
     *
     * @type {*}
     * @memberof mixinViewRules
     */
    rules: any = {
        yard_name: [
            {
                required: true,
                message: "请输入园区名称",
                trigger: "blur"
            }
        ],
        yard_lxr: [
            {
                required: true,
                message: "请输入联系人",
                trigger: "blur"
            }
        ],
        yard_addr: [
            {
                required: true,
                message: "请输入园区地址",
                trigger: "blur"
            }
        ],
        yard_tel: [
            {
                required: true,
                message: "请输入联系电话",
                trigger: "blur"
            }
        ],
        auto_reg: [
            {
                required: true,
                message: "请选择自助注册码",
                trigger: "blur"
            }
        ],
        is_test: [
            {
                required: true,
                message: "请选择是否测试园区",
                trigger: "blur"
            }
        ]
    };
    // 标题
    get title() {
        const title = (this as any).isEdit ? "编辑" : "新增";
        return `${title}园区`;
    }
}
</script>
